<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>

    <div id="page" class="">
   
        <div id="pageBody" class="scrollbar-hover">
            <div class="container">
                <div id="pageContent">


                    <section>
                        <header>
                            <h3>主要导航</h3>
                        </header>
                        <article>
                        
                            <div class="example">
                                <ul class="nav nav-primary">
                                    <li class="">
                                        <a href="###">首页</a>
                                    </li>
                                    <li class="">
                                        <a href="###">动态
                                            <span class="label label-badge label-success">4</span>
                                        </a>
                                    </li>
                                    <li class="">
                                        <a href="###">项目 </a>
                                    </li>
                                    <li class="active">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="###">任务</a>
                                            </li>
                                            <li>
                                                <a href="###">bug</a>
                                            </li>
                                            <li>
                                                <a href="###">需求</a>
                                            </li>
                                            <li>
                                                <a href="###">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>次要导航</h3>
                        </header>
                        <article>
                            <p>通常与主导航一起使用</p>
                            <div class="example">
                                <ul class="nav nav-secondary">
                                    <li class="">
                                        <a href="###">首页</a>
                                    </li>
                                    <li class="">
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="active">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <section class="">
                        <header>
                            <h3>标签页导航</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li>
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>圆点导航</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li>
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>禁用的导航链接</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="nav nav-primary">
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="disabled">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="disabled">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-pills">
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="disabled">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-secondary">
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="disabled">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>垂直排列</h3>
                        </header>
                        <article>
                            <div class="example">
                                <div class="row">
                                    <div class="col-md-3">
                                        <ul class="nav nav-primary nav-stacked">
                                            <li class="active">
                                                <a href="###">首页 </a>
                                            </li>
                                            <li>
                                                <a href="###">动态
                                                    <span class="label label-badge label-success pull-right">4</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="###">项目 </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="">任务</a>
                                                    </li>
                                                    <li>
                                                        <a href="">Bug</a>
                                                    </li>
                                                    <li>
                                                        <a href="">需求</a>
                                                    </li>
                                                    <li>
                                                        <a href="">用例</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3">
                                        <ul class="nav nav-stacked nav-tabs">
                                            <li class="active">
                                                <a href="###">首页 </a>
                                            </li>
                                            <li>
                                                <a href="###">动态
                                                    <span class="label label-badge label-success pull-right">4</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="###">项目 </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="">任务</a>
                                                    </li>
                                                    <li>
                                                        <a href="">Bug</a>
                                                    </li>
                                                    <li>
                                                        <a href="">需求</a>
                                                    </li>
                                                    <li>
                                                        <a href="">用例</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3">
                                        <ul class="nav nav-secondary nav-stacked">
                                            <li class="active">
                                                <a href="###">首页 </a>
                                            </li>
                                            <li>
                                                <a href="###">动态
                                                    <span class="label label-badge label-success pull-right">4</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="###">项目 </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="">任务</a>
                                                    </li>
                                                    <li>
                                                        <a href="">Bug</a>
                                                    </li>
                                                    <li>
                                                        <a href="">需求</a>
                                                    </li>
                                                    <li>
                                                        <a href="">用例</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-3">
                                        <ul class="nav nav-stacked nav-pills">
                                            <li class="active">
                                                <a href="###">首页 </a>
                                            </li>
                                            <li>
                                                <a href="###">动态
                                                    <span class="label label-badge label-success pull-right">4</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="###">项目 </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="">任务</a>
                                                    </li>
                                                    <li>
                                                        <a href="">Bug</a>
                                                    </li>
                                                    <li>
                                                        <a href="">需求</a>
                                                    </li>
                                                    <li>
                                                        <a href="">用例</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>自适应宽度</h3>
                        </header>
                        <article>
                            <p>自适应宽度不能与垂直排列同时使用</p>
                            <div class="example">
                                <ul class="nav nav-primary nav-justified">
                                    <li class="active">
                                        <a href="###">首页 </a>
                                    </li>
                                    <li>
                                        <a href="###">动态
                                            <span class="label label-badge label-success pull-right">4</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="###">项目 </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-justified nav-tabs">
                                    <li class="active">
                                        <a href="###">首页 </a>
                                    </li>
                                    <li>
                                        <a href="###">动态
                                            <span class="label label-badge label-success pull-right">4</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="###">项目 </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-secondary nav-justified">
                                    <li class="active">
                                        <a href="###">首页 </a>
                                    </li>
                                    <li>
                                        <a href="###">动态
                                            <span class="label label-badge label-success pull-right">4</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="###">项目 </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-justified nav-pills">
                                    <li class="active">
                                        <a href="###">首页 </a>
                                    </li>
                                    <li>
                                        <a href="###">动态
                                            <span class="label label-badge label-success pull-right">4</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="###">项目 </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <script>
                        function afterPageLoad() {
                            $('#pageContent').on('click', '.nav > li:not(.disabled) > a', function () {
                                var $item = $(this).parent('li');
                                $item.parent().children('.active').removeClass('active');
                                $item.addClass('active');
                            });
                        }
                    </script>
                    <section>
                        <header>
                            <h3>带标题的导航</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="nav nav-tabs">
                                    <li class="nav-heading">这是标题</li>
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="disabled">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-pills">
                                    <li class="nav-heading">这是标题</li>
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="disabled">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <ul class="nav nav-secondary">
                                    <li class="nav-heading">This is heading</li>
                                    <li class="active">
                                        <a href="###">首页</a>
                                    </li>
                                    <li>
                                        <a href="###">动态</a>
                                    </li>
                                    <li class="disabled">
                                        <a href="###">项目</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                            <span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="">任务</a>
                                            </li>
                                            <li>
                                                <a href="">Bug</a>
                                            </li>
                                            <li>
                                                <a href="">需求</a>
                                            </li>
                                            <li>
                                                <a href="">用例</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <br>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <ul class="nav nav-primary nav-stacked">
                                            <li class="nav-heading">这是标题</li>
                                            <li class="active">
                                                <a href="###">首页 </a>
                                            </li>
                                            <li>
                                                <a href="###">动态
                                                    <span class="label label-badge label-success pull-right">4</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="###">项目 </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="">任务</a>
                                                    </li>
                                                    <li>
                                                        <a href="">Bug</a>
                                                    </li>
                                                    <li>
                                                        <a href="">需求</a>
                                                    </li>
                                                    <li>
                                                        <a href="">用例</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <ul class="nav nav-secondary nav-stacked">
                                            <li class="nav-heading">THIS IS HEADINGS</li>
                                            <li class="active">
                                                <a href="###">首页 </a>
                                            </li>
                                            <li>
                                                <a href="###">动态
                                                    <span class="label label-badge label-success pull-right">4</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="###">项目 </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="">任务</a>
                                                    </li>
                                                    <li>
                                                        <a href="">Bug</a>
                                                    </li>
                                                    <li>
                                                        <a href="">需求</a>
                                                    </li>
                                                    <li>
                                                        <a href="">用例</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <ul class="nav nav-stacked nav-pills">
                                            <li class="nav-heading">THIS IS HEADINGS</li>
                                            <li class="active">
                                                <a href="###">首页 </a>
                                            </li>
                                            <li>
                                                <a href="###">动态
                                                    <span class="label label-badge label-success pull-right">4</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="###">项目 </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多
                                                    <span class="caret"></span>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="">任务</a>
                                                    </li>
                                                    <li>
                                                        <a href="">Bug</a>
                                                    </li>
                                                    <li>
                                                        <a href="">需求</a>
                                                    </li>
                                                    <li>
                                                        <a href="">用例</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                          
                        </article>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
</body>

</html>